import React from 'react';
import { storiesOf, action } from '@kadira/storybook';
import { withKnobs, number } from '@kadira/storybook-addon-knobs';
import { muiTheme } from 'storybook-addon-material-ui';
import { NumberField, SelectButtonGroup, SelectButton, SelectItemList, SelectItem, BackButton, NextButton, HomeButton, HelpButton, Checkbox, SwipeableViews, PhaseProgress, RiskLevelIcon, AboutButton, RiskCheckButton, FiveHealthHabitButtons, Scroll} from './index';
import { BodyItemConstant } from '../../constants/InputItemConstants';
/*global module*/

storiesOf('基本入力コンポーネント群', module)
  .addDecorator(muiTheme())
  .addDecorator(withKnobs)
    .add('活性', () => (
      <div>
        <div>
          <label>テキストボックス（数値）　</label>
          <NumberField name="test1" value="999" propagate={action('propagate')}/>
        </div>
        <div>
          <label>プルダウンリスト　</label>
          <SelectItemList name="test2" value={1} placeholder="選択してください" propagate={action('propagate')}>
            <SelectItem value={1} label={'test1'}/>
            <SelectItem value={2} label={'test2'}/>
            <SelectItem value={3} label={'test3'}/>
          </SelectItemList>
        </div>
        <div>
          <label>トグル選択ボタン　</label>
          <SelectButtonGroup name="test3" value={2} propagate={action('propagate')}>
            <SelectButton value={1} label={'test1'}/>
            <SelectButton value={2} label={'test2'}/>
            <SelectButton value={3} label={'test3'}/>
          </SelectButtonGroup>
        </div>
        <div>
          <BackButton label="戻る" onTouchTap={action('onTouchTap')}/>
          <NextButton label="次へ" onTouchTap={action('onTouchTap')}/>
          <NextButton label="詳細を見る" onTouchTap={action('onTouchTap')}/>
        </div>
        <div>
          <HomeButton onTouchTap={action('onTouchTap')}/>
          <HelpButton onTouchTap={action('onTouchTap')}/>
        </div>
        <div>
          <Checkbox name="test4" label="チェックボックス" propagate={action('propagate')}/>
        </div>
      </div>
    ))
    .add('非活性', () => (
      <div>
        <div>
          <label>テキストボックス（数値）　</label>
          <NumberField name="test1" value="999" disabled={true} propagate={action('propagate')}/>
        </div>
        <div>
          <label>プルダウンリスト　</label>
          <SelectItemList name="test2" value={2} disabled={true} propagate={action('propagate')}>
            <SelectItem value={1} label={'test1'}/>
            <SelectItem value={2} label={'test2'}/>
            <SelectItem value={3} label={'test3'}/>
          </SelectItemList>
        </div>
        <div>
          <label>トグル選択ボタン（すべて）　</label>
          <SelectButtonGroup name="test3" value={2} disabled={true} propagate={action('propagate')}>
            <SelectButton value={1} label={'test1'}/>
            <SelectButton value={2} label={'test2'}/>
            <SelectButton value={3} label={'test3'}/>
          </SelectButtonGroup>
        </div>
        <div>
          <label>トグル選択ボタン（一部）　</label>
          <SelectButtonGroup name="test4" value={3} propagate={action('propagate')}>
            <SelectButton value={1} label={'test1'}/>
            <SelectButton value={2} label={'test2'} disabled={true}/>
            <SelectButton value={3} label={'test3'}/>
          </SelectButtonGroup>
        </div>
        <div>
          <BackButton disabled={true} label="戻る" onTouchTap={action('onTouchTap')}/>
          <NextButton disabled={true} label="次へ" onTouchTap={action('onTouchTap')}/>
          <NextButton disabled={true} label="詳細を見る" onTouchTap={action('onTouchTap')}/>
        </div>
        <div>
          <HomeButton disabled={true} onTouchTap={action('onTouchTap')}/>
          <HelpButton disabled={true} onTouchTap={action('onTouchTap')}/>
        </div>
        <div>
          <Checkbox disabled={true} name="test5" label="チェックボックス" propagate={action('propagate')}/>
        </div>
        <div className="layout-detail">
          <label>プルダウンリスト（シミュレーション）　</label>
          <SelectItemList name="test6" placeholder="量を変更する" placeholderValue={3} disabled={true} propagate={action('propagate')}>
            <SelectItem value={1} label={'test1'}/>
            <SelectItem value={2} label={'test2'}/>
            <SelectItem value={3} label={'test3'}/>
          </SelectItemList>
        </div>
      </div>
    ))
    .add('初期値なし', () => (
      <div>
        <div>
          <label>テキストボックス（数値）　</label>
          <NumberField name="test1" propagate={action('propagate')}/>
        </div>
        <div>
          <label>プルダウンリスト　</label>
          <SelectItemList name="test2" propagate={action('propagate')}>
            <SelectItem value={1} label={'test1'}/>
            <SelectItem value={2} label={'test2'}/>
            <SelectItem value={3} label={'test3'}/>
          </SelectItemList>
        </div>
        <div>
          <label>トグル選択ボタン　</label>
          <SelectButtonGroup name="test3" propagate={action('propagate')}>
            <SelectButton value={1} label={'test1'}/>
            <SelectButton value={2} label={'test2'}/>
            <SelectButton value={3} label={'test3'}/>
          </SelectButtonGroup>
        </div>
      </div>
    ))
    .add('初期値なし - プレースホルダ', () => (
      <div>
        <div>
          <label>テキストボックス（数値）　</label>
          <NumberField name="test1" placeholder="入力してください" propagate={action('propagate')}/>
        </div>
        <div>
          <label>プルダウンリスト　</label>
          <SelectItemList name="test2" placeholder="選択してください" propagate={action('propagate')}>
            <SelectItem value={1} label={'test1'}/>
            <SelectItem value={2} label={'test2'}/>
            <SelectItem value={3} label={'test3'}/>
          </SelectItemList>
        </div>
        <div className="layout-detail">
          <label>プルダウンリスト（シミュレーション）　</label>
          <SelectItemList name="test3" placeholder="量を変更する" placeholderValue={3} propagate={action('propagate')}>
            <SelectItem value={1} label={'test1'}/>
            <SelectItem value={2} label={'test2'}/>
            <SelectItem value={3} label={'test3'}/>
          </SelectItemList>
        </div>
      </div>
    ))
    .add('項目定義から展開', () => (
      <div>
        <div>
          <label>{BodyItemConstant.SMOKING_HABIT.label}　</label>
          <SelectItemList name="test1" placeholder="選択してください" propagate={action('propagate')}>
            {BodyItemConstant.SMOKING_HABIT.choices.map(choice => (
              <SelectItem value={choice.value} label={choice.label}/>
            ))}
          </SelectItemList>
        </div>
        <div>
          <label>{BodyItemConstant.ALCOHOL_AMOUNT_BEER.label}　</label>
          <SelectItemList name="test2" placeholder="選択してください" propagate={action('propagate')}>
            {BodyItemConstant.ALCOHOL_AMOUNT_BEER.choices.map(choice => (
              <SelectItem value={choice.value} label={choice.label}/>
            ))}
          </SelectItemList>
        </div>
        <div>
          <label>{BodyItemConstant.ALCOHOL_HABIT.label}　</label>
          <SelectButtonGroup name="test3" propagate={action('propagate')}>
            {BodyItemConstant.ALCOHOL_HABIT.choices.map(choice => (
              <SelectButton value={choice.value} label={choice.label}/>
            ))}
          </SelectButtonGroup>
        </div>
        <div>
          <label>{BodyItemConstant.HELICOBACTER_PYLORI_FLG.label}　</label>
          <SelectButtonGroup name="test4" propagate={action('propagate')}>
            {BodyItemConstant.HELICOBACTER_PYLORI_FLG.choices.map(choice => (
              <SelectButton value={choice.value} label={choice.label}/>
            ))}
          </SelectButtonGroup>
        </div>
      </div>
    ))
    .add('スワイプ', () => (
        <TestSwipe defalutIndex={0} />
    ))
    .add('プログレスバー', () => (
      <PhaseProgress nowNo={number('nowNo', 1)} endNo={number('endNo', 15)} color={'#1E88E5'} height={number('height', 3)} bgColor={'#BBDEFB'} />
    ))
    .add('リスクレベルアイコン', () => (
      <div>
        <RiskLevelIcon level={'HIGH'} width={'104px'} />
        <RiskLevelIcon level={'A_LITTLE_HIGH'} width={'250px'} />
        <RiskLevelIcon level={'LOW'} width={'70px'} /><br/>
        <RiskLevelIcon level={'HIGH'} width={'104px'} isSelected={true} />
        <RiskLevelIcon level={'A_LITTLE_HIGH'} width={'250px'} isSelected={true} />
        <RiskLevelIcon level={'LOW'} width={'70px'} isSelected={true} />
      </div>
    ))
    .add('このサービスについてボタン', () => (
      <AboutButton />
    ))
    .add('リスクをチェック！ボタン', () => (
      <div>
        <RiskCheckButton onTouchTap={action('onTouchTap')} /><br/><br/>
        <RiskCheckButton disabled={true} onTouchTap={action('onTouchTap')} /><br/><br/>
        <RiskCheckButton label="テスト" onTouchTap={action('onTouchTap')} /><br/><br/>
        <RiskCheckButton label="テスト" disabled={true} onTouchTap={action('onTouchTap')} />
      </div>
    ))
    .add('５つの健康習慣ボタン', () => (
      <div>
        <h4>未実施(入力)</h4>
        <FiveHealthHabitButtons
          onChange={action('onChange')}
          markValue={{
            okSmoking: false,
            okAlcohol: false,
            okBmi: false,
            okActivity: false,
            okSalineFood: false,
          }}
          defaultValue={{
            okSmoking: false,
            okAlcohol: false,
            okBmi: false,
            okActivity: false,
            okSalineFood: false,
          }}
        />
        <h4>一部実施(入力)</h4>
        <FiveHealthHabitButtons
          onChange={action('onChange')}
          markValue={{
            okSmoking: true,
            okAlcohol: true,
            okBmi: false,
            okActivity: false,
            okSalineFood: false,
          }}
          defaultValue={{
            okSmoking: true,
            okAlcohol: true,
            okBmi: true,
            okActivity: false,
            okSalineFood: false,
          }}
        />
        <h4>参照</h4>
        <FiveHealthHabitButtons
          readonly={true}
          markValue={{
            okSmoking: true,
            okAlcohol: true,
            okBmi: false,
            okActivity: false,
            okSalineFood: false,
          }}
        />
      </div>
    ))
    .add('スクロールバー', () => (
      <div>
        <h4>div要素の高さが固定</h4>
        <div style={{
          border: '2px solid #0e7cdc',
          boxShadow: '0px 2px 8px 0px rgba(179, 179, 179, 0.4)',
          padding: '5px',
        }}
        >
          <Scroll height={200}>
            <p>0</p>
            <p>1</p>
            <p>2</p>
            <p>3</p>
            <p>4</p>
            <p>5</p>
            <p>6</p>
            <p>7</p>
            <p>8</p>
            <p>9</p>
          </Scroll>
        </div>

        <h4>画面に合わせて高さが可変</h4>
        <div style={{
          border: '2px solid #0e7cdc',
          boxShadow: '0px 2px 8px 0px rgba(179, 179, 179, 0.4)',
          padding: '10px',
        }}
        >
          <Scroll fixedHeight={600}>
            <p>0</p>
            <p>1</p>
            <p>2</p>
            <p>3</p>
            <p>4</p>
            <p>5</p>
            <p>6</p>
            <p>7</p>
            <p>8</p>
            <p>9</p>
          </Scroll>
        </div>
      </div>
    ));

// テスト用のクラス
class TestSwipe extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      index: props.defalutIndex,
    };
  }
  _handelMove(index) {
    this.setState({index});
  }

  render () {
    const style = {border: 'medium solid black', height: '500px'};
    return (
      <SwipeableViews
        index={this.state.index}
        onChengeIndex={this._handelMove.bind(this)}
        onPageValidate={(idx)=>{
          return idx < 1;// ２ページ目でエラーにする
        }}
        >
        <div style={style}>
          <h1>１ページ目</h1>
          <button onClick={this._handelMove.bind(this,1)}>次へ</button>
        </div>
        <div style={style}>
          <h1>２ページ目（入力値エラーあり) </h1>
          <button onClick={this._handelMove.bind(this,2)}>次へ</button>
        </div>
        <div style={style}>
          <h1>３ページ目</h1>
          <button onClick={this._handelMove.bind(this,3)}>次へ</button>
        </div>
      </SwipeableViews>
    )
  }
}
